<?php
/**
 * 家具列表页
 * User: tengyu
 * Date: 2017/8/29
 * Time: 20:10
 */?>
@extends('common.common')
@section('title','家具列表')
@section('css')<link rel="stylesheet" href="{{asset('/css/product_list.css')}}">@endsection
@section('js')
    <script>
        /***获取当前点击滚动条位置,添加分页*/
        $(function(){
            var winh = $(window).height();//页面可视高
            var i = 1;
            $(window).scroll(function(){
                var pageh = $(document.body).height();
                var scrollt = $(window).scrollTop();//滚动条top
                var winpercent = (pageh-winh-scrollt)/winh;
                var scrollerstatus = $("input[name='status']").val();//是否还有数据状态
                if(scrollerstatus==2){
                    return false;
                }
                if(winpercent<0.4 && scrollerstatus !=2){
                    i++;
                    var fitment_currentpage = parseInt($("input[name='fitment_currentpage']").val())+1;//一次加载一页数据
                    $("input[name='fitment_currentpage']").attr("value",fitment_currentpage);
                    var fitment_brand = $("input[name='fitment_brand']").val();
                    var fitment_type_classify = $("input[name='fitment_type_classify']").val();
                    var fitment_subcate_id = $("input[name='fitment_subcate_id']").val();
                    var minprice = $("input[name='minprice']").val();
                    var maxprice = $("input[name='maxprice']").val();
                    var fitment_price = $("input[name='fitment_price']").val();
                    var fitment_type = $("input[name='fitment_type']").val();
                    var fitment_orderby = $("input[name='fitment_orderby']").val();
                    var fitment_name = $("input[name='fitment_name']").val();
                    var str = '';

                    $.ajax({
                        url:'/append',
                        type:'post',
                        headers: { 'X-CSRF-TOKEN' : '{{ csrf_token() }}' },
                        data:{
                            'fitment_type_classify':fitment_type_classify,'fitment_brand':fitment_brand,'fitment_subcate_id':fitment_subcate_id,
                            'fitment_type':fitment_type,'fitment_orderby':fitment_orderby,'fitment_name':fitment_name,
                            'minprice':minprice,'maxprice':maxprice,'fitment_price':fitment_price,
                            'fitment_currentpage':fitment_currentpage
                        },
                        dataType:'json',
                        success:function(res){
                            if(res.res=='ok')
                            {
                                var count = 0;
                                var data = new Array();
                                for(var a in res.msg)
                                {
                                    if(res.msg[a])
                                    {
                                        data[count] = res.msg[a];
                                        count++;
                                    }
                                }
                                for(var j=0;j<count;j++)
                                {
                                    str += '<div class="col-xs-4 imgO">';
                                    str += '<img src="'+res.filepath+data[j]['fitment_details_imgOne']+'">';
                                    str += '<div class="caption">';
                                    str += '<h3>'+data[j]['fitments_name']+'</h3>';
                                    str += '<p class="Fon1"></p>'+data[j]['fitments_describe'].substr(0,60)+'<p class="Fon2">';
                                    var arr = data[j]['colors'].split(",");
                                    for(var k=0;k<arr.length;k++){
                                        str += '<img src="'+res.color[arr[k]]+'" alt="当前家具颜色">';
                                    }
                                    str += '</p><p class="Fon3"><span>';
                                    str += data[j]['price']+'/月</span>' + '<a href="/fitment/show/'+data[j]['details_id']+'">';
                                    str += '<input type="button" class="btn1" value="查看详情"> </a> </p> </div> </div>';
                                }
                                if(count<18){
                                    $("input[name='status']").attr('value','2');
                                }
                                $(".imgFon").append(str);
                            }
                            else
                            {
                                $("input[name='status']").attr('value',2);
                                console.log('msg');
                            }
                        }
                    });

                }else{
                    return false;
                }
            });
        });

        /**品牌*/
        $("ul.fitment_brand a").click(function(){
            var v = $(this).attr("data-id");
            $("ul.fitment_brand a").removeClass("active");
            $(this).addClass("active");
            $("#centre input[name='fitment_brand']").val(v);
            $("#fitment_list").submit();
        });
        /**分类*/
        $("ul.fitment_subcate_id a").click(function(){
            var v = $(this).attr("data-id");
            $("ul.fitment_subcate_id a").removeClass("active");
            $(this).addClass("active");
            $("#centre input[name='fitment_subcate_id']").val(v);
            $("#fitment_list").submit();
        });

        /**价格*/
        $("ul.fitment_price a").click(function(){
            var v = $(this).attr("data-id");
            $("ul.fitment_price").removeClass("active");
            $("#centre input[name='minprice']").val(null);
            $("#centre input[name='maxprice']").val(null);
            $(this).addClass("active");
            $("#centre input[name='fitment_price']").val(v);
            $("#fitment_list").submit();
        });

        /**手段输入价格*/
        function customprice()
        {
            var min = $("input[name='min']").val();
            var max = $("input[name='max']").val();
            if(min && max){
                if(!/^\d+$/.test(min) || !/^\d+$/.test(max)){
                    alert('请输入数字!');
                }
                if(parseInt(min)>parseInt(max)){
                    alert('你输入价格不在合理区间!');
                }
                $("ul.fitment_price").removeClass("active");
                $("#centre input[name='fitment_price']").val(null);
                $(this).addClass("active");
                $("#centre input[name='minprice']").val(min);
                $("#centre input[name='maxprice']").val(max);
                $("#fitment_list").submit();
            }
        }
        /**新旧属性*/
        $("ul.fitment_type a").click(function(){
            v = $(this).attr("data-id");
            $("ul.fitment_type a").removeClass("active");
            $(this).addClass("active");
            $("#centre input[name='fitment_type']").val(v);
            $("#fitment_list").submit();
        });

        /**租赁方式*/
        $("ul.fitment_rent a").click(function(){
            v = $(this).attr("data-id");
            $("ul.fitment_rent a").removeClass("active");
            $(this).addClass("active");
            $("#centre input[name='fitment_rent']").val(v);
            $("#fitment_list").submit();
        });

        /**排序显示*/
        $("ul.fitment_orderby a").click(function(){
            v = $(this).attr("data-id");
            $("ul.fitment_orderby a").removeClass("active");
            $(this).addClass("active");
            $("#centre input[name='fitment_orderby']").val(v);
            $("#fitment_list").submit();
        });

        /**家具列表*/
        function fitment_list()
        {
            var name = $("input[name='fitment_name']").val();
            if(!name){
                alert('找不到查询条件!');
            }else{
                $("#fitment_list").submit();
            }
        }
    </script>
@endsection
@section('content')
    <div id="content">
    <!--nav start-->
    @include('common.centernav')
    <!--nav end-->
        <!--家具筛选 start-->
        <div class="Plist">
            <div class="container">
                <div id="one">
                    <div id="centre">
                        <form action="/fitment" method="get" id="fitment_list">
                            <input type="hidden" name="fitment_brand" value="{{$param['fitment_brand']}}">
                            <input type="hidden" name="fitment_type_classify" value="{{$param['fitment_type_classify']}}">
                            <input type="hidden" name="fitment_subcate_id" value="{{$param['fitment_subcate_id']}}">
                            <input type="hidden" name="minprice" value="{{$param['minprice']}}">
                            <input type="hidden" name="maxprice" value="{{$param['maxprice']}}">
                            <input type="hidden" name="fitment_price" value="{{$param['fitment_price']}}">
                            <input type="hidden" name="fitment_type" value="{{$param['fitment_type']}}">
                            <input type="hidden" name="fitment_rent" value="{{$param['fitment_rent']}}">
                            <input type="hidden" name="fitment_orderby" value="{{$param['fitment_orderby']}}">
                            <input type="hidden" name="fitment_currentpage" value="1">
                            <div class="panel panel-default">
                                <div class="panel-heading" style="height: 70px;">
                                    <h4 style="line-height: 50px;">商品列表</h4>
                                </div>
                                <div class="panel-body">
                                    <ul class="list-inline fitment_brand">
                                        <li>品牌:</li>
                                        <li><a @if($param['fitment_brand'] == '')class="active"@endif href="javascript:void(0);" data-id="" >不限</a></li>
                                        @foreach($param['brand'] as $v)
                                            <li><a @if($v->id == $param['fitment_brand'])class="active"@endif href="javascript:void(0);" data-id="{{$v->id}}">{{$v->brand_name}}</a></li>
                                        @endforeach
                                    </ul>
                                    <ul class="list-inline fitment_subcate_id">
                                        <li>分类:</li>
                                        <li><a href="javascript:void(0);" data-id="" @if($param['fitment_subcate_id'] == '')class="active"@endif>不限</a></li>
                                        @foreach($param['classify_lists'] as $v)
                                            <li><a href="javascript:void(0);" data-id="{{$v->id}}" @if($param['fitment_subcate_id'] == $v->id)class="active"@endif>{{$v->subcate_name}}</a></li>
                                        @endforeach
                                    </ul>
                                    <ul class="list-inline fitment_price">
                                        <li>租金范围:</li>
                                        <li><a href="javascript:void(0);" data-id="" @if($param['fitment_price'] == '' && ($param['minprice']==''|| $param['maxprice']==''))class="active"@endif>不限</a></li>
                                        <li><a href="javascript:void(0);" data-id="1" @if($param['fitment_price'] == '1')class="active"@endif>100~500</a></li>
                                        <li><a href="javascript:void(0);" data-id="2" @if($param['fitment_price'] == '2')class="active"@endif>500~1000</a></li>
                                        <li><a href="javascript:void(0);" data-id="3" @if($param['fitment_price'] == '3')class="active"@endif>1000~2000</a></li>
                                        <li class="searchPrice" style="margin-bottom: 0px;">
                                            <input type="text" name="min" value="{{$param['minprice']}}" data-id="4" @if($param['minprice'] != '')class="active"@endif class="form-control" placeholder="最低价">
                                        </li>
                                        <li class="searchPrice" style="margin-bottom: 0px;">
                                            <input type="text" name="max" value="{{$param['maxprice']}}" data-id="5" @if($param['maxprice'] != '')class="active"@endif class="form-control" placeholder="最高价">
                                        </li>
                                        <li class="searchPrice">
                                            <button class="btn btn-warning" onclick="customprice()">确定</button>
                                        </li>
                                    </ul>
                                    <ul class="list-inline fitment_type">
                                        <li>新旧属性:</li>
                                        <li><a href="javascript:void(0);" data-id="" @if($param['fitment_type'] == '')class="active"@endif>不限</a></li>
                                        <li><a href="javascript:void(0);" data-id="1" @if($param['fitment_type'] == '1')class="active"@endif>全新家具</a></li>
                                        <li><a href="javascript:void(0);" data-id="2" @if($param['fitment_type'] == '2')class="active"@endif>非全新家具</a></li>
                                    </ul>
                                    <ul class="list-inline fitment_rent">
                                        <li>租赁方式:</li>
                                        <li><a href="javascript:void(0);" data-id="1" @if($param['fitment_rent'] == '1')class="active"@endif>随租随还</a></li>
                                        <li><a href="javascript:void(0);" data-id="2" @if($param['fitment_rent'] == '2')class="active"@endif>租满即送</a></li>
                                    </ul>
                                </div>
                                <div class="panel-footer">
                                    <ul class="list-inline fitment_orderby">
                                        <li><a href="javascript:void(0);" @if($param['fitment_orderby'] == '')class="active"@endif>默认排序</a></li>
                                        <li><a href="javascript:void(0);" data-id="1" @if($param['fitment_orderby'] == '1')class="active"@endif>租金从高到低</a></li>
                                        <li><a href="javascript:void(0);" data-id="2" @if($param['fitment_orderby'] == '2')class="active"@endif>租金从低到高</a></li>
                                        <li>
                                            <input type="text" class="form-control" name="fitment_name" value="{{$param['fitment_name']}}" placeholder="请输入搜索内容">
                                            <b class="glyphicon glyphicon-search" onclick="fitment_list()"></b>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!--家具筛选 end-->
        <!--家具列表 start-->
        <div class="Listp">
            <div class="container">
                <div id="two">
                    <div class="imgFon">
                    @if($param['data'])
                        @foreach($param['data'] as $v)
                        <div class="col-xs-4 imgO">
                            <img src="{{asset(env('STATIC_FILE_ERP_PATH').$v->fitment_details_imgOne)}}">
                            <div class="caption">
                                <h3>{{$v->fitments_name}}</h3>
                                <p class="Fon1">{{substr($v->fitments_describe,0,60)}}</p>
                                <p class="Fon2">
                                    <?php $arr_color=explode(',',$v->colors);?>
                                    @foreach($arr_color as $key=>$value)
                                    <img src="{{$param['color'][$value]}}" alt="家具颜色">
                                    @endforeach
                                </p>
                                <p class="Fon3">
                                    <span>{{$v->price}}/月</span>
                                    <a href="{{url('/fitment/show/'.$v->details_id)}}">
                                        <input type="button" class="btn1" value="查看详情">
                                    </a>
                                </p>
                            </div>
                        </div>
                        @endforeach
                        @else
                        <div class="">
                            <h1 class="text-center"><img src="{{asset('/img/771509094256_.pic.jpg')}}" alt="暂无数据"></h1>
                        </div>
                    @endif
                    </div>
                </div>
            </div>
        </div>
        <!--家具列表 end-->
    </div>
    <!--隔断底部-->
    <div id="partition"></div>
@endsection
